<template>
  <div class="reward-wrap">
    <div class="bg-box">
      <div class="pic1-con">
        <img src="./reward_title.png" class="pic1" onclick="return false"/>
      </div>
    </div>

    <div class="reward-box">
      <div class="qr-box" @click="invitePage">
        <img src="./reward_qr.png" class="pic2" onclick="return false"/>
      </div>

      <div class="title-box">
        <span class="title">奖励明细</span>
      </div>

      <div class="content-box" @click="entryPrize">
        <div class="number1-con">
          <span class="entry">邀请入职</span>
          <span class="money">{{entryTotal}}元</span>
        </div>
        <div class="line-box"></div>
        <div class="number2-con">
          <span>直接邀请：{{directNum}}人</span>
          <span>间接邀请：{{indirectNum}}人</span>
        </div>
        <img src="./reward_in.png" class="pic3" onclick="return false"/>
      </div>

      <div class="content-box distance" @click="registPrize">
        <div class="number1-con">
          <span class="entry">邀请注册</span>
          <span class="money">{{registTotal}}元</span>
        </div>
        <div class="line-box"></div>
        <div class="number2-con">
          <span>邀请注册：{{sumNum}}人</span>
          <span>注册入职满月：{{fullNum}}人</span>
        </div>
        <img src="./reward_in.png" class="pic3" onclick="return false"/>
      </div>

      <div class="title-box">
        <span class="title">奖励规则</span>
      </div>

      <div class="rule-box" v-html="remark"></div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"
  import {toDecimal} from "../../common/js/util"

  export default {
    data() {
      return {
        directNum: "",
        indirectNum: "",
        sumNum: "",
        fullNum: "",
        userSign: "",
        bUserMoney: "",
        cUserMoney: "",
        regUserMoney: "",
        entryTotal: "",
        registTotal: "",
        remark: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.rewardList();
    },
    methods: {
      invitePage() {
        this.$router.push("/invite");
      },
      entryPrize() {//入职奖励
        this.$router.push("/rewardentry");
      },
      registPrize() {//注册奖励
        this.$router.push("/rewardregist");
      },
      rewardList() {//获取邀请注册、入职人数
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/invite/get_register?sgin=" + this.userSign + "&versionType=2.3").then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.directNum = resultObj.data.BUserNum;//直接邀请人数
            this.indirectNum = resultObj.data.CUserNum;//间接邀请人数
            this.sumNum = resultObj.data.sumNum;//邀请的总注册人数
            this.fullNum = resultObj.data.fullMonthNum;//邀请注册已到账人数
            this.bUserMoney = resultObj.data.bUserMoney;//直接邀请单价
            this.cUserMoney = resultObj.data.cUserMoney;//间接邀请单价
            this.regUserMoney = resultObj.data.regUserMoney;//注册单价
            this.entryTotal = toDecimal(resultObj.data.totalMoney);//邀请入职奖励金额
            this.registTotal = toDecimal(resultObj.data.regMoney);//邀请注册奖励金额

            if (resultObj.data.remark) {
              this.remark = resultObj.data.remark.replace(/\n/g, "<br/>");
            }
          } else {
            this.$vux.toast.text(billObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .reward-wrap
    wh(100%, auto)
    background: #548af7
    .bg-box
      wh(100%, 9.64rem)
      bg-image("./reward_bg.png", 100%, 100%)
      .pic1-con
        margin: 0 auto
        padding-top: 1.067rem
        wh(7.853rem, 1.08rem)
        .pic1
          wh(100%, 100%)
    .reward-box
      wh(100%, auto)
      background: #548af7
      .qr-box
        margin: 0 auto
        padding-bottom: 0.747rem
        wh(8.533rem, 1.28rem)
        .pic2
          wh(100%, 100%)
      .title-box
        margin: 0 auto
        fj(center, center)
        wh(9.36rem, 0.48rem)
        bg-image("./divide.png", 100%, 100%)
        .title
          size-color(0.427rem, rgba(255, 255, 255, 0.8))
      .content-box
        display: flex
        align-items: center
        margin: 0 auto
        margin-top: 0.493rem
        wh(9.36rem, 2.453rem)
        background: rgba(252, 254, 255, 1)
        border-radius: 0.16rem
        .number1-con
          display: flex
          flex-direction: column
          margin-left: 0.64rem
          margin-right: 0.64rem
          .entry
            padding-bottom: 0.12rem
            size-color(0.427rem, rgba(60, 175, 255, 1))
            font-weight: 500
          .money
            padding-top: 0.12rem
            size-color(0.56rem, rgba(60, 175, 255, 1))
            font-weight: 500
        .line-box
          wh(0.027rem, 1.6rem)
          background: rgba(235, 235, 235, 1)
        .number2-con
          display: flex
          flex-direction: column
          margin-left: 0.8rem
          span
            size-color(0.373rem, rgba(153, 153, 153, 1))
            &:first-child
              padding-bottom: 0.12rem
            &:last-child
              padding-top: 0.12rem
        .pic3
          margin-left: auto
          margin-right: 0.493rem
          wh(0.48rem, 0.48rem)
      .distance
        margin-top: 0.32rem
        margin-bottom: 0.8rem
      .rule-box
        margin: 0 auto
        margin-top: 0.587rem
        padding-bottom: 0.947rem
        wh(9.227rem, auto)
        size-color(0.373rem, rgba(255, 255, 255, 1))
        line-height: 0.64rem
</style>
